<template>
  <div class="box">
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">  
          <el-input clearable placeholder="请输入内容" v-model="queryInfo.query" @clear="getOrderList" >
            <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="orderList" border stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="50px" >
          <template slot-scope="scope">{{scope.row.index}}</template>
        </el-table-column>        
        <el-table-column prop="order_number" label="订单编号" width="300px"></el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="120px" ></el-table-column>
        <el-table-column label="是否付款" width="120px" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.order_pay==0">未付款</el-tag>
            <el-tag v-if="scope.row.order_pay==1" type="success">已付款</el-tag>
          </template>
        </el-table-column>        
        <el-table-column prop="is_send" label="是否发货" width="120px"></el-table-column>
        <el-table-column label="下单时间" >
          <template slot-scope="scope">
            {{scope.row.create_time | dateFormat}}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="195px">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="btnEditOrder(scope.row.id)"></el-button>
            <!-- 物流 -->
            <el-button type="success" icon="el-icon-location" size="mini" ></el-button>   
          </template>        
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1,2,5,10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>  
    <!-- 修改订单对话框 -->
    <el-dialog
      title="修改地址"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="editDialogClosed">
      <!-- 内容主题区 -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <!-- prop 是验证规则 -->
        <el-form-item label="省市区/县">
          <el-cascader style="width:100%" clearable change-on-select v-model="editForm.address1" :options="cityData" :props="cascadeProps"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>      
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancelEdit">取 消</el-button>
        <el-button type="primary" @click="btnSaveEdit">确 定</el-button>
      </span>
    </el-dialog>
    </el-card>
  </div>
</template>
<script>
import cityData from "./citydata";
export default {
  data() {
    return {
      // 获取用户列表的参数
      queryInfo: {
        // 搜索请求参数
        query: "",
        // 当前页数
        pagenum: 1,
        // 每页显示多少数据
        pagesize: 5,
      },
      // 获取的订单列表
      orderList: [],
      // 总数据条数
      total: 0,
      // 修改订单对话框是否打开
      editDialogVisible: false,
      // 修改订单表单
      editForm: {
        // 省市区/县
        address1: [],
        // 详细地址
        address2: "",
      },
      editFormRules: {
        address1: [
          { required: true, message: "请选择省市区县", trigger: "blur" },
        ],
        address2: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
      // 城市数据
      cityData: [],
      // 级联选择器的配置
      cascadeProps: {
        expandTrigger: "hover",
      },
    };
  },
  created() {
    this.getOrderList();
    this.cityData = cityData;
  },
  methods: {
    // 获取用户列表 如果queryInfo.query为空，则全部查询，queryInfo.query不为空，则参数查询
    async getOrderList() {
      // get 方法返回一个 promise 对象
      const { data: res } = await this.$axios.get("orders", {
        params: this.queryInfo,
      });
      if (res.meta.status != 200) {
        return this.$message.error(res.meta.msg);
      }
      this.$message.success(res.meta.msg);
      this.orderList = res.data.goods;
      this.total = res.data.total;
      // 为一级数据添加索引
      for (let i = 0; i < this.orderList.length; i++) {
        this.orderList[i].index =
          i + 1 + (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize;
      }
    },
    // 改变每页显示多少行
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getOrderList();
    },
    // 改变当前页码
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getOrderList();
    },
    // 修改订单按钮
    btnEditOrder(id) {
      this.editDialogVisible = true;
    },
    // 修改订单对话框关闭后触发的事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
      this.editForm.address1 = [];
    },
    // 修改订单界面取消按钮
    btnCancelEdit() {
      this.editDialogVisible = false;
    },
    // 修改订单界面确定按钮
    btnSaveEdit() {
      this.editDialogVisible = false;
    },
  },
};
</script>

<style>
</style>